<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			body{
				width:100%;
				height: 10000000px;
				background-color: url(img/蜡笔小新.png);
				background-size:cover;
				/*函数 cover 等比例放大图片 特点：图片按照比例放大存背景空间
				【开发者：背景图大小是否等于背景空间】
				contain 等比例缩放图片 特点：图片按照比例缩放存背景空间
				【开发者：背景图等比例显示在背景空间】
				
				*/
			   /*背景附件--尺寸存在cover或者contain */
			  background-attachment: fixed;/*背景图固定 scroll 不固定*/
			}
			div{
				width: 300px;
				height:300px;
				background-color: #e4393c;
				background:#ffff00;
				background-image:url(img/蜡笔小新.png);
				/*问题 超大图 --不显示 小图--显示
				 注意：背景空间大小，如果图小于背景空间---平铺
				 */
				background-repeat:no-repeat;
				/*不平铺 repeat-x,y 横，纵向平铺*/
				background-size:30%;
				/*背景尺寸属性值 数值px % |函数 cover contain*/
				/*背景定位：前提背景空间大雨背景图 关键字：center，left，right*/
				background-position: 80% 0;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente maxime accusamus assumenda soluta totam odio, ratione vitae laboriosam. Veniam molestiae ducimus aut deserunt maiores mollitia architecto omnis? Consectetur, animi quia?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo accusantium ea nulla ad, maiores voluptatibus, non sit doloremque dolore at consequatur reprehenderit culpa! Illum voluptatem non harum nesciunt itaque accusantium?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti amet odio architecto autem, molestias sunt nihil sint incidunt eius aspernatur modi? Dolorem nesciunt assumenda laudantium, ipsam ab dolores nobis officia?
		<!--html
        img图片 引入一张图片，位置不可随意改变
		css 背景图片 引入一张图片，位置可以随意改变
		子属性 background-color：背景颜色
		复合属性 background-image 背景图
		background-repeat
		background-size
		background-attchment
		background-position
		复合属性 background：background
		-->
		<div></div>
	</body>
</html>